<template>
  <div class="enter">
    
    <ul class="enter_shell">
      <li class="enter_name flex">
        <p class="enter_left">姓名</p>
        <input v-model="info.name" placeholder="请输入真实姓名">
      </li>
      <li class="enter_sex flex">
        <p class="enter_left">性别</p>
        <ul class="enter_sex flex">
          <li>
            <label for="1">男</label>
            <input type="radio" id="1" value="男" v-model="info.sex">
          </li>
          <li>
            <label for="0">女</label>
            <input type="radio" id="0" value="女" v-model="info.sex">
          </li>
        </ul>
      </li>
      <li class="enter_date flex">
        <p class="enter_left">出生日期</p>
        <my-birthdate></my-birthdate>
      </li>
      <li class="enter_phone flex">
        <p type="number" class="enter_left">手机号码</p>
        <input v-model="info.mobile" placeholder="请输入真实手机号">
      </li>
      <li class="enter_id flex">
        <p type="number" class="enter_left">身份证号码</p>
        <input v-model="info.idcard" placeholder="请输入身份证号">
      </li>
      <li class="enter_data flex">
        <p class="enter_left">所属城市</p>
        <my-city :prov="provEnter"></my-city>
      </li>
      <!-- <li class="enter_referee flex">
        <p class="enter_left">推荐人</p>
        <input v-model="referee" placeholder="请输入推荐人">
      </li> -->
      <li class="enter_refereeID flex">
        <p class="enter_left">推荐人ID</p>
        <input v-model="info.parent_uid" placeholder="请输入推荐人ID">
      </li>
      <!-- <li class="enter_pic flex">
        <p class="enter_left">照片</p>
        <div class="show_img" v-if="showImg">
          <img :src="picture">
        </div>
        <div v-else class="enter_img" @click="upload_img">点击上传</div>
      </li> -->
    </ul>

    <!-- 是否已阅读并同意 -->
    <div class="check_agree">
      <input type="checkbox" id="checkbox" v-model="checked" name="">
      <!-- <label for="checkbox">我已阅读并同意 </label> -->
      <span>我已阅读并同意</span>
      <span class="toGuide" @click="toGuide">《小伙伴申请须知》</span>  
    </div>

    <!-- <button class="enter_btn" >提交审核</button> -->
    <button :class="[checked == true?'enter_btn':'enter_btn enter_btn_none']" @click="enter" v-bind:disabled="!checked">提交审核</button>

    <!-- <div class="alert_out" v-if="showAlert" ref="homePage"></div> -->
    <div class="alert_out" v-if="showAlert"></div>
    <div class="alert" v-if="showAlert">
      <p>{{alert}}</p>
      <button class="alert_btn" @click="close">确定</button>
    </div>

  </div>
</template>



<script>
import wx from 'weixin-js-sdk'
import city from '@/components/common/city'
import birthdate from '@/components/common/birthDate'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let Base64 = require('js-base64').Base64;
export default {
  name: 'enter',
  components: {
    'my-city': city,
    'my-birthdate': birthdate
  },
  data () {
    return {
      checked: false,//是否已阅读并同意
      // clientHeight:'', //屏高
      name: '',
      sex: '男',
      mobile: '',
      idcard: '',
      referee: '',
      refereeID: '',
      picture: '',
      uploadImg: '',
      jssdk: {}, //jssdk中config的信息
      // message: '',
      showImg: false,
      provEnter: '',  //所属城市
      // 下面的是alert
      alert: '',
      showAlert: false,
      info: {
        name: '',
        sex: '男',
        mobile: '',
        idcard: '',
        referee: '',
        parent_uid: '',
      },
    }
  },
  mounted() {
    this.getJssdk();
    this.getInfo();
    this.$root.share();
  },
  methods: {
    enter(){
      var that = this;
      var uname = that.info.name.toString();
      var umobile = that.info.mobile;
      var usex = that.info.sex;
      var uidcard = that.info.idcard;
      var udata = global.enter.birth;
      var uprovince = global.enter.prov.toString();
      var ucity = global.enter.city.toString();
      var udistrict = global.enter.district.toString();
      // var umedia_id = that.uploadImg;
      var parentUid = that.info.parent_uid;
      if (uname == '' || uname == null) {
        that.alert = "请输入姓名";
        that.showAlert = true;
      } else if (umobile == '' || umobile == null) {
        that.alert = "请输入手机号";
        that.showAlert = true;
      } else if (uidcard == '' || uidcard == null) {
        that.alert = "请输入身份证号";
        that.showAlert = true;
      } 
      // else if (umedia_id == '' || umedia_id == null) {
      //   that.alert = "请上传图片";
      //   that.showAlert = true;
      // } 
      else{
        axios.post(global.api.buddy.apply.url,{
          uuid: localStorage.getItem('carWashUuid'),
          name: uname,
          mobile: umobile,
          sex: usex,
          idcard: uidcard,
          province: uprovince,
          city: ucity,
          district: udistrict,
          date: udata,
          // media_id: umedia_id,
          parent_uid: parentUid,
        })
        .then(function(res){
          console.log("enter then");
          console.log(res);
          // that.$router.push({path:'/'})
          if (res.data.code == 0) {
            that.$router.go(-1)
            alert(res.data.data.msg);
          } else {
            alert(res.data.data.msg);
          }
        })
        .catch(function(res){
          console.log("enter catch");
          console.log(res);
        })
      }
    },
    upload_img(event){
      var that = this;
      alert(that.jssdk.appId);
      alert(that.jssdk.timestamp);
      alert(that.jssdk.nonceStr);
      alert(that.jssdk.signature);
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: that.jssdk.appId, // 必填，公众号的唯一标识
        timestamp: that.jssdk.timestamp, // 必填，生成签名的时间戳
        nonceStr: that.jssdk.nonceStr, // 必填，生成签名的随机串
        signature: that.jssdk.signature,// 必填，签名
        jsApiList: ['chooseImage','uploadImage'] // 必填，需要使用的JS接口列表
      });
      wx.ready(function(){
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: function (res) {
            // var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片            
            // that.picture = localIds;
            // that.message = res;
            that.showImg = true;
            that.picture = res.localIds
            wx.uploadImage({
              localId: res.localIds.toString(),
              isShowProgressTips: 1,
              success: function (res){
                // var serverId = res.serverId;
                // that.showImg = true;
                that.uploadImg = res.serverId;
                // console.log(res.serverId);
              }
            })
          }
        })
      });
      wx.error(function(res){
        console.log(res);
      })
    },
    close () {
      this.showAlert = false;
    },
    // 获取jssdk
    getJssdk(){
      var that = this;
      var pathUrl = window.location.href;
      pathUrl = Base64.encode(pathUrl);
      axios.get(global.api.user.jssdk,{
        params: {
          url: pathUrl,
        }
      })
      .then(function(res){
        console.log("getJssdk then");
        console.log(res);
        that.jssdk = res.data.content;
      })
      .catch(function(res){
        console.log("getJssdk catch");
        console.log(res);
      })      
    },
    // 获取信息
    getInfo(){
      var that = this;
      axios.get(global.api.order.customer.adopt,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("getInfo then");
        console.log(res);
        if (res.data.code == 0) {
          if (res.data.data.isshow == 1) {
            that.info = res.data.data
          }
        }
      })
      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      })
    },
    // 到申请须知页面
    toGuide(){
      this.$router.push({path:'/guide'})
    },
  }
}
</script>



<style scoped>
  .enter{
    position: relative;
    width: 100%;
  }
  .enter_shell{}
  .enter_shell li{
    padding: 0rem 0.5rem;
    justify-content: flex-start;
    align-items: center;
    line-height: 3.5rem;
  }
  .enter_shell input{
    padding: 0.4rem 0 0.4rem 10px;
    flex: 1;
    font-size: 0.95rem;
  }
  .enter_shell select{
    padding: 0.2rem 0;
  }
  .enter_name{}
  .enter_sex{}
  .enter_date{}
  .enter_phone{}
  .enter_id{}
  .enter_data{}
  .enter_referee{}
  .enter_refereeID{}
  .enter_pic{}
  .enter_left{
    width: 5rem;
    /*width: 5.9rem;*/
    text-align: right;
    margin-right: 0.5rem;
  }
  .show_img{
    flex: 1;
  }
  .show_img img{
    width: 100%;
  }
  .enter_img{
    width: 6rem;
    height: 6rem;
    line-height: 6rem;
    background-color: #EFEFEF;
    color: #8E8E8E;
    font-size: 0.9rem;
  }
  .enter_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 1rem 0 1rem;
  }
  .enter_btn_none{
    background-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.7);
  }
  /* 下面的是弹出框 */
  .alert_out{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.3);
  }
  .alert{
    width: 50%;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 25%;
    margin-top: -50px;
    background-color: #fff;
    border-radius: 5px;
  }
  .alert p {
    height: 70px;
    line-height: 70px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0,0,0,0.4);
  }
  .alert_btn{
    background-color: #fff;
    border: none;
    line-height: 30px;
    font-size: 1rem;
  }
  /*check_agree*/
  .check_agree{
    text-align: center;
    font-size: 0.9rem;
    margin: 1.5rem 0 0;
  }
</style>
<style>
  *:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  ul,li,li,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>